import { Table, Button } from "antd";
// import userStore from './userStore';
// import { useState } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

function userList({ users, dispatch }){
    const { Column, ColumnGroup } = Table;


    function deleteUserHandler(id) {
        dispatch({
            type: 'delete_user',
            payload: {
              user:{
                  id:id
              }
            }
        })
    }

    return (
        <div>
            {/* <Table dataSource={userStore.users}> */}
            <Table dataSource={users}>
                <Column title="id" dataIndex="id" key="id"/>
                <ColumnGroup title="个人信息">
                    <Column title="姓名" dataIndex="name" key="name"/>
                    <Column title="性别" dataIndex="sex" key="sex"/>
                </ColumnGroup>
                <Column title="地址" dataIndex="address" key="address"/>
                <Column title="兴趣爱好" dataIndex="tags" key="tags"/>
                <Column title="操作" dataIndex="id" 
                    render={(text, record) => 
                        <div>
                            <Link to={'/userinfo/' + record.id}>修改</Link>&nbsp;
                            <Button onClick={() => deleteUserHandler(record.id)}>删除</Button>
                        </div>
                    }></Column>
            </Table>
        </div>
    )
}



export default connect(({ users }) => ({ users }))(userList)